Folasaga
Amata i le Bootstrap, le ta'iala sili ona lauiloa i le lalolagi mo le fausiaina o nofoaga e tali atu, feavea'i-muamua, ma le jsDelivr ma se itulau amata fa'ata'ita'iga.
vave amata
Su'e e fa'aopoopo vave le Bootstrap i lau poloketi? Fa'aaoga le jsDelivr, o se CDN e tatala fua. Le fa'aogaina o se pule o pusa po'o mana'omia le la'uina o faila fa'apogai? Ulu i le itulau downloads .
CSS
Kopi-fa'apipi'i le sitaili <link>
i totonu o lau pepa <head>
a'o le'i uma isi sitaili e uta ai la matou CSS.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS
Ole tele oa tatou vaega e mana'omia le fa'aogaina ole JavaScript e fa'atino ai. Aemaise lava, latou te manaʻomia a tatou lava JavaScript plugins ma Popper . Tuu se tasi o mea nei <script>
i tafatafa o le pito o au itulau, i luma tonu o le </body>
pine faʻamau, ina ia mafai ai.
fusi
Faʻaaofia uma Bootstrap JavaScript plugin ma faʻalagolago i se tasi o matou fusi e lua. E lua bootstrap.bundle.js
ma bootstrap.bundle.min.js
aofia ai Popper mo a matou meafaigaluega ma popovers. Mo nisi faʻamatalaga e uiga i mea o loʻo aofia i totonu o Bootstrap, faʻamolemole vaʻai la matou vaega o mea .
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Vaevae
Afai e te filifili e te alu i le fofo eseese o tusitusiga, e tatau ona sau muamua Popper (pe afai o loʻo e faʻaogaina meafaigaluega poʻo popovers), ona sosoo ai lea ma a matou JavaScript plugins.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Modules
Afai e te faʻaogaina <script type="module">
, faʻamolemole vaʻai i la matou faʻaogaina o Bootstrap o se vaega o le module .
Vaega
E fia iloa po'o fea vaega e mana'omia manino le tatou JavaScript ma Popper? Kiliki le fa'aaliga vaega so'oga i lalo. Afai e te le mautinoa e uiga i le fausaga lautele o itulau, faitau pea mo se faʻataʻitaʻiga itulau faʻataʻitaʻiga.
Fa'aali vaega e mana'omia le Javascript
- Lapata'i mo le fa'ate'aina
- Fa'amau mo le sui tulaga ma le pusa siaki/leitio galuega
- Carousel mo amioga fa'ase'e uma, fa'atonuga, ma fa'ailoga
- Pa'u mo le fesuia'iina o le va'aia o mea
- Pa'u i lalo mo le fa'aalia ma le fa'atulagaina (e mana'omia fo'i Popper )
- Fa'ata'ita'iga mo le fa'aali, fa'atulagaina, ma le amio ta'ai
- Navbar mo le faʻalauteleina o la matou Collapse plugin e faʻatino ai amioga tali
- Tapena va'ai mo le fa'aali, fa'atulagaina, ma le amio ta'ai
- Toasts mo le faʻaalia ma le faʻateʻaina
- Tooltips ma popovers mo le faʻaalia ma le faʻatulagaina (e manaʻomia foʻi Popper )
- Scrollspy mo amio ta'ai ma fa'afouga fa'afouga
Fa'ata'ita'iga amata
Ia mautinoa e fa'atutu au itulau ma fa'ata'ita'iga fou ma fa'ata'atiaga. O lona uiga o le faʻaaogaina o se HTML5 doctype ma aofia ai se viewport meta tag mo amioga tali lelei. Fa'atasi uma ma e tatau ona fa'apea lau itulau:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Mo isi laasaga, asiasi i le Layout docs poʻo matou faʻataʻitaʻiga aloaʻia e amata faʻataʻatia ai mea o lau 'upega tafaʻilagi ma vaega.
Fa'alelalolagi taua
O lo'o fa'aaogaina e Bootstrap le tele o sitaili fa'alelalolagi ma fa'atonuga e tatau ona e nofouta i ai pe a fa'aaogaina, o ia mea uma e toetoe lava a fa'atatau i le fa'avasegaina o sitaili su'esu'e. Tatou maulu i totonu.
HTML5 doctype
Bootstrap e manaʻomia le faʻaogaina o le HTML5 doctype. A aunoa ma lea mea, o le a e vaʻai i ni sitaili malie e le atoatoa, ae aofia ai e le tatau ona mafua ai se faʻalavelave tele.
<!doctype html>
<html lang="en">
...
</html>
Tali meta tag
O le Bootstrap o lo'o fa'atupuina muamua le telefoni feavea'i , o se ta'iala lea tatou te fa'amanino muamua ai le code mo masini feavea'i ona fa'atupuina lea o vaega pe a mana'omia e fa'aaoga ai fesili fa'asalalau CSS. Ina ia faʻamautinoa le tuʻuina atu ma le faʻaogaina o le paʻi mo masini uma, faʻapipiʻi le meta tag faʻaaliga tali i lau <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
E mafai ona e vaʻai i se faʻataʻitaʻiga o lenei mea i le gaioiga i le faʻataʻitaʻiga amata .
Pusa-fa'atele
Mo le sili atu le tuusaʻo sizing i CSS, matou fesuiai le box-sizing
tau o le lalolagi mai content-box
i le border-box
. E fa'amautinoaina padding
e le afaina ai le lautele fa'atulagaina mulimuli o se elemene, ae e mafai ona fa'atupu fa'afitauli i nisi polokalame fa'a-tolu e pei o Google Maps ma Google Custom Search Engine.
I se taimi seasea e te manaʻomia e faʻamalo ai, faʻaaoga se mea e pei o nei:
.selector-for-some-widget {
box-sizing: content-box;
}
Faatasi ai ma le snippet o loʻo i luga, o mea faʻapipiʻi-e aofia ai mea na gaosia e ala i ::before
ma ::after
-o le a faʻatosina uma le mea faʻamaonia box-sizing
mo lena .selector-for-some-widget
.
A'oa'o atili e uiga i pusa fa'ata'ita'iga ma le fa'avasegaina ile CSS Tricks .
Toe fai
Mo le fa'aleleia atili o su'esu'ega o su'esu'ega, matou te fa'aogaina le Toe Fa'afouina e fa'asa'o ai fa'aletonu i luga o su'esu'ega ma masini a'o tu'uina atu le tele o fa'afouga manatu i elemene HTML masani.
Nuu
Tumau i le taimi nei i le atinaʻeina o Bootstrap ma aapa atu i le alalafaga ma nei punaoa fesoasoani.
- Faitau ma lesitala ile The Official Bootstrap Blog .
- Talanoa ma uso Bootstrappers ile IRC. I luga o le
irc.libera.chat
server, i le#bootstrap
alalaupapa. - E mafai ona maua fesoasoani fa'atino ile Stack Overflow (tagged
bootstrap-5
). - E tatau i tagata atiaʻe ona faʻaogaina le upu autu
bootstrap
i luga o afifi e suia pe faʻaopoopo i le faʻatinoga o Bootstrap pe a tufatufa atu i le npm poʻo auala faʻapipiʻi tutusa mo le maualuga o le mauaina.
E mafai foi ona e mulimuli i le @getbootstrap i luga ole Twitter mo tala faitatala lata mai ma ata mata'utia musika.